<template>
	<common-page>
		<view style="padding: 0 32rpx;">
			<u-subsection
				class="page-custom-section"
				:list="list" mode="button" :current="currentIndex"
				activeColor="#fff" inactiveColor="#333333"
				fontSize="30rpx"
				keyName="label"
				@change="bindSectionChange"
			></u-subsection>
		</view>
		<view class="content-wrap">
			<swiper class="swiper" :current="currentIndex" @change="bindSwiperChange">
				<swiper-item :current-item-id="0">
					<Info :deviceSn="deviceSn" />
				</swiper-item>
				<swiper-item :current-item-id="1">
					<Sleep :deviceSn="deviceSn" />
				</swiper-item>
			</swiper>
		</view>
	</common-page>
</template>

<script>
import Info from './info.vue';
import Sleep from './sleep.vue';
export default {
	components: {
		Info,
		Sleep
	},
	data() {
		return {
			list: [{
				label: '跌倒'
			}, {
				label: '睡眠'
			}],
			currentIndex: 0,
			status: 'nomore',
			deviceSn: ''
		};
	},
	onLoad(option) {
		this.deviceSn = option.deviceSn;
	},
	methods: {
		bindSectionChange(ev) {
			this.currentIndex = ev;
		},
		bindSwiperChange(ev) {
			this.currentIndex = ev.detail.current;
		}
	}
};
</script>

<style lang="scss" scoped>
::v-deep .u-subsection {
	height: 66rpx !important;
	border-radius: 66rpx !important;
	padding: 0 !important;
	margin-top: 24rpx !important;
	.u-subsection__bar {
		border-radius: 66rpx !important;
		background-color: #417CE9;
		height: 66rpx !important;
	}
}
.content-wrap {
	height: calc(100vh - 66rpx - 24rpx - var(--window-top) - var(--status-bar-height));
	.swiper {
		height: 100%;
	}
}
</style>
